<template>
	<view class="">
		<view class="topImg" v-if="dataListlMyPj">
			<image class="ImgStyle" :src="dataListlMyPj.arcId" mode=""></image>
			<view class="topTitle">
				<view style="font-weight: 700">{{ dataListlMyPj.pjName }}</view>
				<view>{{ dataListlMyPj.buildAddress }}</view>
			</view>
			<view class="information">
				<view class="information_top">
					<view class="information_topFlex">
						<view style="color: red" class="textColor">
							{{ dataListlMyPj.esAllInvest || '- -' }}
							<text class="textFontSize">万元</text>
						</view>
						<view class="textFont">估算总投资</view>
					</view>
					<view class="information_topFlex">
						<view style="color: #3d8cf6" class="textColor">
							{{ dataListlMyPj.planEndDate }}
							<text class="textFontSize">天</text>
						</view>
						<view class="textFont">距离竣工时间</view>
					</view>
				</view>

				<uni-section title="项目进度" type="line">
					<view style="padding: 0 20rpx 20rpx; margin-bottom: 10rpx">
						<u-line-progress :percentage="processList" activeColor="#2e87ff"></u-line-progress>
					</view>
				</uni-section>

				<uni-section title="工程内容" type="line">
					<uni-list :border="false">
						<view style="padding: 0 0 30rpx 0">
							<uni-list-item :border="false" title="责任人" :rightText="dataListlMyPj.dutyByName || '- -'" />
							<uni-list-item :border="false" title="项目规模" :rightText="dataListlMyPj.pjType == 0 ? '县级' : dataListlMyPj.pjType == 1 ? '镇街级' : '- -'" />
							<uni-list-item
								:border="false"
								title="建设性质"
								:rightText="
									dataListlMyPj.buildType == 0
										? '已竣工'
										: dataListlMyPj.buildType == 1
										? '续建'
										: dataListlMyPj.buildType == 2
										? '新建'
										: dataListlMyPj.buildType == 3
										? '预备'
										: '- -'
								"
							/>
							<uni-list-item :border="false" title="联系电话" :rightText="dataListlMyPj.dutyByPhone || '- -'" />
							<uni-list-item :border="false" title="施工单位" :rightText="dataListlMyPj.constrOrgName || '- -'" />
							<uni-list-item :border="false" title="设计单位" :rightText="dataListlMyPj.constrOrgName || '- -'" />
							<uni-list-item :border="false" title="建设单位" :rightText="dataListlMyPj.builOrgName || '- -'" />
							<uni-list-item :border="false" title="监理单位" :rightText="dataListlMyPj.managOrgName || '- -'" />
							<uni-list-item :border="false" title="开工时间" :rightText="dataListlMyPj.startDate || '- -'" />
							<uni-list-item :border="false" title="竣工时间" :rightText="dataListlMyPj.endDate || '- -'" />
							<uni-list-item :border="false" title="总建设规模和内容" :note="dataListlMyPj.totallBuildDes || '- -'" />
							<uni-list-item :border="false" title="本年建设主要内容" :note="dataListlMyPj.yearBuildDes || '- -'" />
							<uni-list-item :border="false" title="项目建设必要性及依据" :note="dataListlMyPj.pjBasis || '- -'" />
						</view>
					</uni-list>
				</uni-section>
			</view>
		</view>
		<u-loading-page v-else :loading="true" loading-text="加载中..."></u-loading-page>
	</view>
</template>

<script>
import { getDetailMyPj } from '@/api/mappages/project/project.js';
export default {
	data() {
		return {
			optionsData: '',
			dataListlMyPj: '',
			processList: ''
		};
	},
	onLoad(options) {
		if (options.WoID) {
			this.optionsData = options.WoID;
			console.log(this.optionsData, '``````````````'); // 现在可以使用传递的 item 数据
		}
		this.detailMyPj();
	},
	methods: {
		async detailMyPj() {
			let arr = await getDetailMyPj(this.optionsData);
			console.log(arr, '烟火气');
			this.processList = arr.result.process;
			let brr = arr.result.ipmsPjInfo.planEndDate.split('-');
			arr.result.ipmsPjInfo.planEndDate = this.daysUntilDate(brr[0], brr[1], brr[2]);
			this.dataListlMyPj = arr.result.ipmsPjInfo;
			console.log(this.dataListlMyPj, '烟火气');
		},
		daysUntilDate(year, month, day) {
			const givenDate = new Date(year, month - 1, day); // JavaScript 中的月份是从 0 开始的，所以需要减 1
			const currentDate = new Date();

			// 计算两个日期之间的时间差（以毫秒为单位）
			const timeDifference = givenDate - currentDate;

			// 将时间差转换为天数
			const dayDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));

			return dayDifference;
		}
	}
};
</script>

<style scoped lang="scss">
.information {
	padding: 0 80rpx 40rpx 80rpx;
}

.information_top {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	background-color: #fff;
	padding: 20rpx;
	margin: 10rpx 0;
}

.information_topFlex {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.content_center {
	display: flex;
	flex-direction: column;
	color: #000;
	padding: 0 20rpx;
}
.textFontSize {
	font-size: 22rpx;
	color: #000;
}

.textColor {
	font-size: 44rpx;
	font-weight: bold;
	letter-spacing: 2rpx;
}
.textFont {
	font-size: 22rpx;
	color: rgba(102, 102, 102, 0.8);
	font-weight: bold;
}

.ImgStyle {
	width: 100%;
	height: 380rpx;
}

.topImg {
	position: relative;
}

.topTitle {
	position: absolute;
	top: 280rpx;
	left: 60rpx;
	color: #fff;
	font-weight: bold;
}
/deep/ .uni-list-item__container {
	padding: 20rpx 20rpx 0 20rpx;
}
</style>
